<template>
  <view>
    <view class="my-order">
      <view class="header bg-color">
        <view class="picTxt acea-row row-between-wrapper">
          <view class="text">
            <view class="name">消息中心</view>
          </view>
          <view class="pictrue">
            <image src="../../../static/images/orderTime.png"></image>
          </view>
        </view>
      </view>
       <!-- <view class="handleread">
          <text class="allread" @click="Read">全部已读</text>
          <text class="allremove">全部清空</text>
        </view> -->
      <view class="list" >
        <block v-for="(item, index) in orderList" :key="index">
          <view @click="handerBtn(item)">
          <view class="item acea-row">
          <view class="tip">提醒</view>
          <view class="item-nav">
            <view class="dot" v-if="item.status == 1"></view>
            <h3>{{item.title}}</h3> 
            <p class="tcr">{{item.content}}</p>
            <p class="tcr" v-if="item.order !== null">订单号：{{item.order}}</p>
            <p class="tcr">{{item.update_time}}</p>
          </view>
        </view>
        </view>
        </block>
      </view>
      <!-- 暂无消息 -->
      <view v-if="orderList.length == 0">
        <emptyPage title="暂无消息~"></emptyPage>
      </view>
    </view>
    <!-- 暂无消息END -->
  </view>
</template>

<script>
import {
  getNoticelist
} from '@/api/order.js'
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js'
import { toLogin } from '@/libs/login.js'
import { mapGetters } from 'vuex'
import emptyPage from '@/components/emptyPage.vue'
export default {
  components: {
    emptyPage,
  },
  data() {
    return {
      loading: false, //是否加载中
      loadend: false, //是否加载完毕
      loadTitle: '', //提示语
      orderList: [], //订单数组
      orderData: {}, //订单详细统计
      orderStatus: 0, //订单状态
      page: 1,
      limit: 20,
      pay_close: false,
      pay_order_id: '',
      totalPrice: '0',
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      now_money: 0,
    }
  },
  computed: mapGetters(['isLogin']),
  onShow() {
    if (this.isLogin) {
    } else {
      // #ifdef H5 || APP-PLUS
      toLogin()
      // #endif
    }
  },
  onLoad() {
    getNoticelist().then(res => {
      console.log(res);
        this.orderList = res.data
        console.log(this.orderList);
      })
  },
  methods: {
    Read() {
      console.log('全部阅读');
    },
    handerBtn(status) {
      status.status = 0
    }
  }
}
</script>

<style scoped lang="scss">
.lucky_code {
  color: #ff9500;
  margin-top: 10rpx;
  width: 100%;
}
.lucky_code .right {
  float: right;
}
.my-order {
  padding-bottom: 20rpx;
}
.my-order .header {
  height: 180rpx;
  padding: 0 30rpx;
}

.my-order .header .picTxt {
  height: 180rpx;
}
.handleread {
  height: 40rpx;
  line-height: 40rpx;
  margin: 20rpx 0;
  padding: 0 20rpx;
}
.allread {
  color:#EF271E;
  font-size: 36rpx;
  font-weight: 400;
}
.allremove {
  float: right;
  color: #EF271E;
  font-size: 36rpx;
  font-weight: 400;
}
.my-order .header .picTxt .text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 26rpx;
  font-family: 'Guildford Pro';
}

.my-order .header .picTxt .text .name {
  font-size: 34rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
  width: 122rpx;
  height: 109rpx;
}

.my-order .header .picTxt .pictrue image {
  width: 100%;
  height: 100%;
}

.my-order .list {
  width: 690rpx;
  margin: 14rpx auto 10rpx auto;
}
.item {
  position: relative;
  flex-wrap: nowrap;
  height: 200rpx;
  background-color: #F8F8F8;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  position: absolute;
  top: 30rpx;
  left: 95%;
  background-color: #EF271E;
}
.tip {
  display: inline-block;
  margin-top: 30rpx;
  width: 80rpx;
  height: 46rpx;
  font-size: 24rpx;
  line-height: 46rpx;
  color: #fff;
  text-align: center;
  background-color: #EF271E;
  border-radius: 0 8rpx 8rpx 0;
}
.item-nav {
  padding:20rpx 0 0 20rpx;
}
.tcr {
  color: #5E6063;
  margin: 10rpx 0;
}
.noCart {
  margin-top: 171rpx;
  padding-top: 0.1rpx;
}

.noCart .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
  width: 100%;
  height: 100%;
}
.bg_color_grey {
  background: gray;
}
</style>
